<template>
  <m-container>
    <m-navbar title="历史工单" background="#fff">
      <view slot="right" @click="show = true"> {{ date || '选择日期' }} <m-icon name="fillarrow-down"></m-icon></view>
    </m-navbar>
    <out-work-item-scroll
      ref="scroll"
      :api="outWorkHistory"
      :is-history="1"
      :modal="params"
      height="calc(100vh - 55px)"
    />
    <u-calendar v-model="show" mode="range" @change="handleChange" />
  </m-container>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api'
import { onLoad } from 'uni-composition-api'
import { outWorkHistory } from '@/api/modules/out-work'
import dayjs from 'dayjs'

export default defineComponent({
  setup(props) {
    const scroll = ref(null) as any
    const state = reactive({
      show: false,
      date: '',
      params: {
        from: '',
        to: '',
      },
      outWorkHistory,
    })

    const handleChange = (e) => {
      state.date = e.startDate.slice(5) + '~' + e.endDate.slice(5)
      state.params.from = e.startDate + ' 00:00:00'
      state.params.to = e.endDate + ' 23:59:59'
      scroll.value.downCallback()
    }

    onLoad(async () => {
      const startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
      const endDate = dayjs().format('YYYY-MM-DD')
      state.date = startDate.slice(5) + '~' + endDate.slice(5)
      state.params.from = startDate + ' 00:00:00'
      state.params.to = endDate + ' 23:59:59'
    })

    return {
      ...toRefs(state),
      handleChange,
      scroll,
    }
  },
})
</script>
<style lang="scss"></style>
